import { Row, Select, Divider, Descriptions, Cascader } from 'antd';
import React, { Component } from 'react';
import styles from './HomeMonitorTab.less';
import { BorderBox11 } from '@jiaminghi/data-view-react';
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
import { Line } from '@ant-design/charts';
import { connect } from 'umi';
import { Column, Radar, Rose } from '@ant-design/plots';
import { color } from 'echarts';

class HomeMonitorTab extends Component {
  constructor(props) {
    super(props);
    this.state = {
      AlltWaterQualityDatas: [],
      uvData: [],
      config_: {},
      testdata: [
        {
          date: '分类一',
          scales: 0.2,
        },
        {
          date: '分类二',
          scales: 2.5,
        },
        {
          date: '分类三',
          scales: 0.8,
        },
        {
          date: '分类四',
          scales: 1.5,
        },
        {
          date: '分类五',
          scales: 1,
        },
        {
          date: '其他',
          scales: 0.5,
        },
      ],
    };
  }

  componentDidMount() {
    // 当页面组件完全的加载完毕触发此生命周期，只会触发一次
    this.getMicorElements('1');
    this.getAllWaterQualityData('1')

  }

  refreshData(updateData, newData) {
    this.setState((prevState) => ({ [updateData]: newData, }))
  }

  getAllWaterQualityData(index) {
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'warningManage/geAlltWaterQualityData',
        payload: index,
      });
  }
  getMicorElements(index) {
    console.log(this.state.uvData)
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'warningManage/getMicorElements',
        payload: index,
      });
  }
  updateMicroElements(data) {
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'warningManage/updateMicorElements',
        payload: { micorelements: data },
      });
  }

  render() {
    const { micorelements, AlltWaterQualityData } = this.props;
    const uvData = []
    // this.state.uvData = []
    // this.state.AlltWaterQualityDatas = []

    AlltWaterQualityData.map((value) => {
      this.state.AlltWaterQualityDatas.push({
        date: value.date,
        scales: +value.scales,
        waterlevel: value.waterlevel,
      });
    });
    const config = {
      data: this.state.AlltWaterQualityDatas,
      xField: 'date',
      yField: 'scales',
      xAxis: {
        label: {
          style: {
            fill: '#FFFFFF',
          },
        },
      },
      yAxis: {
        label: {
          formatter: (scales) => {
            if (scales === '0') {
              return 'I类水';
            }
            if (scales === '1') {
              return 'II类水';
            }
            if (scales === '2') {
              return 'III类水';
            }
            if (scales === '3') {
              return 'IV类水';
            }
            if (scales === '4') {
              return 'V类水';
            }
          },
          style: {
            fill: '#FFFFFF',
          },
        },
      },
      point: {
        size: 5,
        shape: 'circle',
        style: {
          fill: 'white',
          stroke: '#5B8FF9',
          lineWidth: 2,
        },
      },
      smooth: true,
    };

    micorelements.map((value) => {
      uvData.push({ date: value.date, scales: +value.proportion, realdata: +value.scales })
    });
    const config_ = {
      data: uvData,
      xField: 'date',
      yField: 'scales',
      // seriesField: 'date',
      // radius: 0.9,
      xAxis: {
        line: null,
        tickLine: null,
        grid: {
          line: {
            style: {
              lineDash: null,
            },
          },
        },
      },
      yAxis: {
        label: null,
        line: null,
        tickLine: null,
        grid: {
          line: {
            type: 'line',
            style: {
              lineDash: null,
            },
          },
        },
      },
      area: {},
    };

    return (
      <Row className={styles.TabDiv}>
        <div className={styles.Divcontain} style={{ position: 'relative' }}>
          <div
            className={styles.curstom}
            style={{ textAlign: 'right', fontSize: 10, fontFamily: 'Georgia', border: '0px' }}
          >
            <span
              style={{
                fontSize: 14,
                margin: 10,
                color: 'white',
              }}
            >
              断面选择：
            </span>
            <Select
              defaultValue={'1'}
              style={{
                width: 150,
                right: 5,
                marginTop: 2,
              }}
              onChange={(index) => {
                this.getMicorElements(index);
              }}
              options={[
                {
                  value: '1',
                  label: '何堂桥(17+775)',
                },
                {
                  value: '2',
                  label: '丁桥口桥(33+067)',
                },
                {
                  value: '3',
                  label: '石板桥(43+234)',
                },
                {
                  value: '4',
                  label: '赵西村桥(8+943)',
                },
                {
                  value: '5',
                  label: '后陈楼后(14+800)',
                },
                {
                  value: '6',
                  label: '郭竹园桥(11+430)',
                },
              ]}
              dropdownStyle={{ backgroundColor: '#dadada', color: '#fff' }}
            />
          </div>
          <div style={{ height: '48%', marginBottom: 10, marginTop: 0 }}>
            <BorderBox11 title="水质监测情况" titleWidth={200} color={['#0b80f1', '#114b73']}>
              <div style={{ padding: '8%', paddingTop: '18%' }}>
                <p style={{ color: 'white' }}>
                  单位:（mg/L）×10<sup>-3</sup>
                </p>
                <Radar {...config_} height={250} />
              </div>
            </BorderBox11>
          </div>
          <div style={{ height: '43%' }}>
            <BorderBox11 title="断面水质变化情况" titleWidth={200} color={['#0b80f1', '#114b73']}>
              <div
                style={{ padding: '10%', paddingTop: '22%', height: '100%' }}
                className={styles.curstom}
              >
                <span
                  style={{
                    position: 'absolute',
                    top: '17.5%',
                    right: 85,
                    fontSize: 14,
                    color: 'white',
                  }}
                >
                  污染物选择：
                </span>
                <Select
                  defaultValue={'1'}
                  dropdownStyle={{ backgroundColor: '#dadada' }}
                  style={{
                    width: 70,
                    top: '15%',
                    right: 15,
                    position: 'absolute',
                    backgroundColor: '#081C31',
                    color: '#081C31',
                  }}
                  onChange={(index) => {
                    this.getAllWaterQualityData(index);
                  }}
                  options={[
                    {
                      value: '9',
                      label: '整体',
                    },
                    {
                      value: '1',
                      label: '铅',
                    },
                    {
                      value: '2',
                      label: '铬',
                    },
                    {
                      value: '3',
                      label: '镉',
                    },
                    {
                      value: '4',
                      label: '汞',
                    },
                    {
                      value: '5',
                      label: '油',
                    },
                    {
                      value: '6',
                      label: '铁',
                    },
                    {
                      value: '7',
                      label: '硫',
                    },
                    {
                      value: '8',
                      label: '锰',
                    },
                  ]}
                />
                <div style={{ padding: '2%', height: '100%' }}>
                  <Line {...config} />
                </div>
              </div>
            </BorderBox11>
          </div>
        </div>
      </Row>
    );
  }
}
export default connect(({ warningManage }) => ({
  micorelements: warningManage.micorelements,
  AlltWaterQualityData: warningManage.AlltWaterQualityData,
}))(HomeMonitorTab);
